import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';

// import axios from './server/axios';
// import { getTopics,getTopic } from './server';
import * as api from './server';
import './Home.css';
import dayjs from './day';
import Bottom from './Bottom'


console.log(dayjs().from(dayjs()))

// console.log(dayjs().format())

const Home = () => {
    const [topics, setTopics] = useState([]);
    useEffect(() => {

        // fetch('https://cnodejs.org/api/v1/topics')
        // .then(res=>res.json())
        // .then(res=>{
        //     console.log(res);
        // })

        // ./server/axios里面的配置
        // axios后面写相对地址，没有第二步的json相对转换，直接可以拿到res并打印
        // axios比fetch但是最后拿到的不是success对象，而是多嵌套了一层，可以res.data再获取到想要的数据
        // axios.get('/topics')
        //     .then(res=>{
        //         // axios里面response的什么，这里的res就会接收到什么
        //         console.log(res);
        //     })

        // ./server/index.js 里面的配置 用getTopics()来响应，里面会有各种函数来调用即可，这个是不用传参的函数
        // *都叫api，然后调用的时候api.什么 .什么
        api.getTopics()
            .then(res => {
                setTopics(res.data);
            })
        // api.getTopic(100)
        //     .then(res => {
        //         console.log(res);
        //     })
    }, [])
    return (
        <div className='home'>
            <ul className='topics'>
                {
                    topics.map(item => {
                        return <li key={item.id}>
                            <Link to={'/topic/' + item.id} key={item.id}>{item.title}</Link>
                            <span className='time'>{dayjs(item.last_reply_at).fromNow()}</span>
                            {/* <span className='time'>{dayjs().from(dayjs(item.last_reply_at))}</span> */}
                        </li>
                    })
                }
            </ul>
            <div className='bottom'>
                <Bottom />
            </div>

        </div>
    );
};

export default Home;
